<template>
  <view>
    <Header></Header>
    <view class="card" v-if="list.length != 0">
      <view v-for="item in list" :key="item.arrange_id" class="list">
        <view class="item">
          <view class="flex-js">
            <view class="flex-center">
              <image class="avatar" :src="`/static/image/${item.clue.gender == '1' ? 'gender1' : 'gender'}.png`">
              </image>
              <view class="fw ml2">{{ item.clue.student_name }} </view>
            </view>
            <view class="evaluating center" @click="goEvaluating(item)">立即评测</view>
          </view>
          <view class="flex mt3">年级：<view>{{ item.grade_name }}</view>
          </view>
          <view class="flex mt3 flex-center">已测项目:{{ item.test_items }}
          </view>
        </view>
      </view>
    </view>
    <view v-if="status == 'noMore'" class="noData f48 fw">您还没有需要测评的用户 </view>
  </view>
</template>

<script setup>
import { arrange } from '/api'
import { useStore } from 'vuex'

const { state, commit, dispatch } = useStore()


const list = ref([])
const status = ref('more')

onLoad(async (options) => {
})

onShow(() => {
  init()
  commit('CLEAR_STUDENT_INFO')
})

async function init() {
  status.value = 'loading'
  const {
    data: { data }
  } = await arrange({})
  list.value = data
  status.value = data.length === 0 ? 'noMore' : 'more'
}

function goEvaluating(item) {
  commit('SET_STUDENT_INFO', item)
  uni.navigateTo({
    url: `/pages/evaluating/index?student_id=${item.clue_id}&subject_ids=${item.subject_ids}&grade_id=${item.clue.grade_id}&stage_id=${item.clue.stage_id}`
  })
}
</script>

<style lang="scss" scoped>
.card {
  padding: 30rpx;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;

  .list {
    display: flex;
    flex-wrap: wrap;
    width: 33.33%;
    height: 300rpx;
    max-width: 900rpx;
    margin-bottom: 30rpx;
  }

  .item {
    width: 100%;
    height: 300rpx;
    background-color: #f9f9f9;
    margin: 30rpx;
    border-radius: 8rpx;
    padding: 50rpx 30rpx;
    box-sizing: border-box;

    .avatar {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
    }

    .evaluating {
      width: 140rpx;
      height: 50rpx;
      background-color: #377CB7;
      color: #ffff;
      font-size: 24rpx;
      border-radius: 10rpx;
    }
  }
}
</style>
